<template>

  <!-- 左侧菜单折叠按钮-->
  <div class="aside-float-fold"
       :class="{
         'is-collapse': collapse,
       }"
       @click="toggleCollapse">
    <div class="aside-float-fold-box">
      <!--      <div class="top"></div>-->
      <div class="center">
        <vip-icon v-if="isLeft" class="fold-unfold" :icon="collapse ? unfold : fold" />
        <vip-icon v-else class="fold-unfold" :icon="collapse ? fold : unfold" />
      </div>
      <!--      <div class="bottom"></div>-->
    </div>

  </div>

</template>

<script setup lang="ts">

defineOptions({
  name: 'VipAsideFloatFold',
})

type DirectionType = 'left' | 'right'

interface Props {
  direction?: DirectionType,
  unfold?: string
  fold?: string
}

const props = withDefaults(defineProps<Props>(), {
  unfold: 'arrow-right-line',
  fold: 'arrow-left-line',
  direction: 'left',
})

const isLeft = computed(() => props.direction === 'left')

// const collapse = ref(false)
const collapse = defineModel({ type: Boolean, default: false })

const toggleCollapse = () => {
  collapse.value = !collapse.value
  // emit('click')
}

// const emit = defineEmits(['click'])

</script>

<style scoped lang="scss">

.fold-unfold {
  //color: var(--el-color-grey);
  cursor: pointer;
}


// 左侧菜单折叠按钮
.aside-float-fold {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  //left: calc(var(--layout-aside-split-submenu-width) + var(--layout-aside-split-width));
  //z-index: var(--el-z-index);
  z-index: calc(var(--el-z-index) + 3) !important;
  text-align: center;
  //transition: left 0.3s;
  transition: left var(--el-transition);

  //&.isCollapse {
  //  //left: var(--layout-aside-split-width);
  //  left: calc(var(--layout-aside-collapse-width) + var(--layout-aside-split-width));
  //}

  .aside-float-fold-box {
    display: flex;
    flex-direction: column;

    .center {
      //width: 20px;
      //height: 50px;
      //background: #1016254d;
      background: var(--el-color-white);
      //background: var(--el-background-color);
      //background: var(--el-color-primary-light-9);
      //background: var(--el-color-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--el-border-color);
      border-radius: 50%;

      :deep() {
        i {
          font-size: 20px;
          font-weight: bold;
          //line-height: 50px;
          color: #1016254d;
          //color: #FFFFFF !important;
          //background: var(--el-color-primary-light-9);
          //color: var(--el-background-color) !important;
        }
      }
    }

    .top {
      //background: var(--el-color-primary);
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: transparent transparent rgba(16, 22, 37, .3) rgba(16, 22, 37, .3);
    }

    .bottom {
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: rgba(16, 22, 37, .3) transparent transparent rgba(16, 22, 37, .3);
    }
  }

}

</style>
